<template>
  <div class="take-header">
    <div class="take-header-logo">
      <router-link class="logo-img" to="/take"><img src="https://waimai.meituan.com/static/img/new2018/header-logo-black.png" alt="" /></router-link>
    </div>
    <div class="take-header-nav">
      <ul class="header-nav">
        <li class="nav-item" v-for="(link, index) in headerNav" :key="index">
          <router-link :class="{ active: needNavShowIndex === index }" to="">{{ link }}</router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      headerNav: ['首页', '入住加盟', '开放平台', '社会责任', '点外卖', '下载手机版'],
      navShowIndex: 4
    };
  },
  computed: {
    needNavShowIndex() {
      return this.navShowIndex;
    }
  }
};
</script>

<style lang="stylus" rel="stylussheet/stylus">
.take-header
  margin 0 auto
  width 61.875rem
  height 100%
  background-color #FFFFFF
  .take-header-logo
    float left
    height 4.375rem
    font-size 0
    .logo-img
      display inline-block
      width 10.1875rem
      height 3rem
      margin-top 0.6875rem
      img
        width 10.1875rem
        height 3rem
  .take-header-nav
    float right
    height 4.375rem
    .header-nav
      height 4.375rem
      line-height 4.375rem
      .nav-item
        float left
        margin 0 1.25rem
        height 4.375rem
        a
          display inline-block
          height 4.375rem
          box-sizing border-box
          line-height 4.375rem
          color #222222
          &.active
            font-weight 700
            border-bottom 3px solid #FFBD27
          &:hover
            font-weight 700
            border-bottom 0.1875rem solid #FFBD27
</style>
